@charset "utf-8";
@import "reset";
html,body{
    margin: 0;
    padding: 0;
}
.WebPage{
    width: 100%;
    position: relative;
}
header{
    z-index: 100;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
    position: fixed;
    padding: 10px 5%;
    top: 0;
    left: 0;
    >div{
        width:8%;
        >img{
            width: 100%;
        }
    }
    >i{
        font-size: 32px !important;
    }
}
.lunbo{
    width: 85%;
    margin: 0 auto;
    margin-top:90px;
    >ol{
        bottom: 30px !important;
        >li{
            width: 10px !important;
            height: 10px !important;
            border-radius: 50% !important;
            margin: 0 6px !important;
        }
    }
}
.lunbo-button{
    width: 227px;
    height: 58px;
    border: 1px solid #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    color: white;
    text-align: center;
    line-height: 58px;
    cursor: pointer;
}
.lunbo-button:hover{
    background: rgba(255,255,255,.4);
}
.Content-top{
    width: 75%;
    position: relative;
    margin:50px auto;
    div{
        position: relative;
        overflow: hidden;
        >img{
            width: 100%;
            transition: all 0.5s;
            transform: scale(1);
        }
        >div{
            width: 227px;
            height: 58px;
            border: 1px solid #ffffff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%);
            color: white;
            text-align: center;
            line-height: 58px;
            cursor: pointer;
        }
    }
    >p{
        text-align: center;
        font-size: 22px;
    }
}
.Content-top:hover{
    >div{
        overflow: hidden;
        >img{
            transform: scale(1.2);
        }
    }
}
.Content-center{
    width: 75%;
    position: relative;
    margin:50px auto;
    >p{
        text-align: center;
        font-size: 22px;
    }
    >div:nth-of-type(1){
        display: flex;
        justify-content: space-between;
        margin-top: 3vw;
        >div:nth-of-type(1){
            width: 64%;
            >div{
                width: 100%;
                overflow: hidden;
                >img{
                    width: 100%;
                    height: 30vw;
                    transition: all 0.5s;
                    transform: scale(1);
                }
            }
            >div:hover{
                >img{
                    transform: scale(1.2);
                }
            }
            >p{
                text-align: center;
                font-size: 16px;
                margin: 1vw 0;
            }
            >h1{
                font-size: 24px;
                text-align: center;
            }
        }
        >div:nth-of-type(2){
            width: 32%;
            >div{
                overflow: hidden;
                width: 100%;
                >img{
                    width: 100%;
                    height: 30vw;
                    transition: all 0.5s;
                    transform: scale(1);
                }
            }
            >div:hover{
                >img{
                    transform: scale(1.2);
                }
            }
            >p{
                text-align: center;
                font-size: 16px;
                margin: 1vw 0;
            }
            >h1{
                font-size: 24px;
                text-align: center;
            }
        }
    }
    >div:nth-of-type(2){
        display: flex;
        justify-content: space-between;
        margin-top: 3vw;
        >div:nth-of-type(1){
            width: 32%;
            >div{
                width: 100%;
                overflow: hidden;
                >img{
                    width: 100%;
                    height: 30vw;
                    transition: all 0.5s;
                    transform: scale(1);
                }
            }
            >div:hover{
                >img{
                    transform: scale(1.2);
                }
            }
            >p{
                text-align: center;
                font-size: 16px;
                margin: 1vw 0;
            }
            >h1{
                font-size: 24px;
                text-align: center;
            }
        }
        >div:nth-of-type(2){
            width: 66%;
            >div{
                overflow: hidden;
                width: 100%;
                >img{
                    width: 100%;
                    height: 30vw;
                    transition: all 0.5s;
                    transform: scale(1);
                }
            }
            >div:hover{
                >img{
                    transform: scale(1.2);
                }
            }
            >p{
                text-align: center;
                font-size: 16px;
                margin: 1vw 0;
            }
            >h1{
                font-size: 24px;
                text-align: center;
            }
        }
    }
}
.Content-bottom{
    width: 65%;
    margin: 0 auto;
    position: relative;
    >p{
        margin-top: 100px;
        font-size: 16px;
        text-align: center;
    }
    >h1{
        margin-top: 20px;
        font-size: 24px;
        text-align: center;
    }
    >video{
        margin-top: 40px;
        width: 100%;
    }
}
.bottom{
    width: 100%;
    position: relative;
    >img{
        width: 100%;
    }
    >div:nth-of-type(1){
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%);
        font-size: 60px;
        letter-spacing: 2px;
        color: #ffffff;
    }
    >div:nth-of-type(2){
        width: 100%;
        height: 103px;
        background: rgba(0,0,0,0.5);
        position: absolute;
        bottom: 0;
        left: 0;
        padding:0 15%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        >p{
            color: white;
        }
        >i{
            color: white;
            font-size: 24px;
        }
    }
}
.Content-button{
    margin: 55px auto;
    width: 300px;
    height: 58px;
    border: 2px solid #202020;
    text-align: center;
    line-height: 58px;
}
.Content-button:hover{
    background: rgba(0,0,0,0.4);
    color: white;
}
.Mask-left{
    width:100%;
    height: 100vh;
    background: white;
//  visibility: hidden;
    display: none;
    position:fixed;
    top: 0;
    left: 0;
    z-index: 120;
    padding: 20px 5%;
    >div:nth-of-type(1){
        >i{
            font-size: 32px;
        }
    }
    >div:nth-of-type(2){
        width: 100%;
        >ul{
            width: 100%;
            >li{
                font-size: 16px;
                width: 30%;
                margin: 0 auto;
                line-height: 80px;
                text-align: center;
                border-bottom: 1px solid #B9BBBE;
            }
        }
        >div:nth-of-type(1){
            width: 30%;
            text-align: center;
            margin: 0 auto;
            >p{
                line-height: 80px;
                >span:hover{
                    color:#B9BBBE;
                }
            }
        }
        >div:nth-of-type(2){
            width: 20%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin:0 auto;
            >i{
                font-size: 20px !important;
            }
            >span{
                color:#B9BBBE ;
            }
        }
    }
}
